<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<script type="text/x-template" id="paging-template">
<nav aria-label="Page navigation">
	<span> 共 {{ page.total }} 条数据 </span> <br />
	<ul class="pagination">
		<li :class="{ disabled: page.pageNum <= 1 }">
			<a href="javascript:void(0);" aria-label="Previous" @click="goPage(page.pageNum - 1)">
				<span aria-hidden="true">&laquo;</span>
			</a>
		</li>
		<li v-for="each in navigatePages" :class="{ active: each === page.pageNum }">
			<a href="javascript:void(0);" @click="goPage(each)">{{ each }}</a>
		</li>
		<li :class="{ disabled: page.pageNum >= page.pages }">
			<a href="javascript:void(0);" aria-label="Next" @click="goPage(page.pageNum + 1)">
				<span aria-hidden="true">&raquo;</span>
			</a>
		</li>
	</ul>
</nav>
</script>
<script>
Vue.component('paging', {
  template: '#paging-template',
  props: {
	  page: Object
  },
  computed: {
	  navigatePages: function() {
		  // 最多显示多少页面，暂时写死在这里
		  var navNums = 5;
		  var halfNavNums = Math.floor(navNums / 2);
		  var data = new Array();
		  var page = this.page;
		  
		  if (page.pages < navNums) {
			  for (var i = 1; i <= page.pages; i++) {
				  data.push(i);
			  }
			  
			  return data;
		  }
		  
		  var start = page.pageNum - halfNavNums;
		  var end = page.pageNum + halfNavNums;
		  start = start > 0 ? start : 1;
		  end = end > page.pages ? page.pages : end;
		  
		  var tmp = halfNavNums - (page.pageNum - 1); 
		  if (tmp > 0 && end + tmp <= page.pages) {
			  end += tmp;
		  }
		  
		  tmp = halfNavNums - (page.pages - page.pageNum);
		  if (tmp > 0 && start - tmp >= 1) {
			  start -= tmp;
		  }
		  
		  for (var i = start; i <= end; i++) {
			  data.push(i);
		  }
		  
		  return data;
	  }
  },
  methods: {
	  goPage: function (num) {
		  // 校验页码合法性
		  if (num <= 0) {
			  return ;
		  }
		  
		  if (num > this.page.pages) {
			  return ;
		  }
		  
		  this.page.pageNum = num;
		  this.$emit('go');
	  }
  }
})
</script>